import { useDark, useToggle } from '@vueuse/core'
const isDark = useDark()
const toggleDark = useToggle(isDark)

import defaultSettings from '@/settings'
const { footerVisible, footerContent } = defaultSettings

import Cookies from 'js-cookie'

const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || ''

const useSettingsStore = defineStore(
  'settings',
  {
    state: () => ({
      theme: storageSetting.theme || '#409EFF', // 主题色
      isDark: isDark.value, // 白/黑模式
      size: Cookies.get('size') || 'default', // 组件大小
      isExpanded: Cookies.get('isExpanded') || 'expand', // 侧边栏状态
      footerVisible: footerVisible,
      footerContent: footerContent,
    }),
    actions: {
      // 切换主题模式
      toggleTheme() {
        toggleDark()
        this.isDark = !this.isDark
      },
      setSize(size) {
        this.size = size
        Cookies.set('size', size)
      },
      isExpandChange(isExpanded) {
        if (isExpanded == 'expand') {
          this.isExpanded = 'fold'
        } else {
          this.isExpanded = 'expand'
        }
        Cookies.set('isExpanded', this.isExpanded)
      }
    }
  }
)

export default useSettingsStore